<html>
   <head>
<meta charset="utf-8"> 
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/maokong.css" rel="stylesheet" type="text/css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    
      <link rel="stylesheet"  href="css/jquery.mobile.structure.css" />
      <link rel="stylesheet" href="css/jquery.mobile.theme.css" />
      <script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
          document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
          var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
          document.write('<script src="js/lib/cordova-android.js"></sc' + 'ript>');
          var mobile_system = 'android';
        } else {
          var mobile_system = '';
        }
      </script>
      
      <script src="js/lib/jquery.js"></script>
      <!-- your scripts here -->
      <script src="js/app/app.js"></script>
      <script src="js/app/bootstrap.js"></script>
      <script src="js/lib/jquery.mobile.js"></script>
       <script type='text/javascript' src='scripts/camera.min.js'></script> 
      <script src="js/jquery.easing.1.3.js"></script>
        <script>
        function onDeviceReady() {
            console.log("We got device ready");
            cordova.exec(null, null, "SplashScreen", "hide", []);
        }
            // Soon to be
            // navigator.splashscreen.hide();
        </script>
 
      <script type="text/javascript" language="javascript">
 
         $.noConflict();
 
         jQuery(document).bind("ready", function () {
 
            jQuery.ajaxSetup({
                  cache: false
            });
 
 
            jQuery("#a2").bind("click touch", function () {
                  jQuery("#player").html(videopanel("L3ksEAyrj6k"));
            });
 
            jQuery("#a3").bind("click touch", function () {
                  jQuery("#player").html(videopanel("4BRyIORw0yQ"));
            });
 
            jQuery("#a4").bind("click touch", function () {
                  jQuery("#player").html(videopanel("7ErgffP0wVw"));
            });
 
         });
 
         function videopanel(id) {
 
            str = '<param name="movie" value="http://www.youtube.com/v/' + id + '?autoplay=1"></param>';
            str += '<param name="wmode" value="transparent"></param>';
            str += '<embed src="http://www.youtube.com/v/' + id + '?autoplay=1" ';
            str += 'type="application/x-shockwave-flash" wmode="transparent" width="100%" height="75%">';
            str += '</embed>';
 
            return str;
 
         }
 
      </script>
 
   </head>
   <body>
 
      <div data-role="page" id="page">
     <div data-role="header" class="title" data-theme="c" data-position="fixed">
    <h1 >商品詳細資訊</h1>
  </div>

         <div data-role="content"
        style="margin:0px 0px 0px 0px; padding:10px 2% 75% 2%; width:96%; height:75%; background-color:#000000;">
 
            <object id="player" width="100%" height="75%">
                  <param name="movie" value="http://www.youtube.com/v/L3ksEAyrj6k?autoplay=1"></param>
                  <param name="wmode" value="transparent"></param>
                  <embed src="http://www.youtube.com/v/L3ksEAyrj6k?autoplay=1"
                  type="application/x-shockwave-flash" wmode="transparent" width="100%" height="75%"></embed>
            </object>
 
            <br /><br />
 
            <ul data-role="listview" data-inset="true" data-filter="true">
                  <li><a id="a2" href="#">吳雨霏 – 距離</a></li>
                  <li><a id="a3" href="#">吳雨霏 – 明知做戲</a></li>
                  <li><a id="a4" href="#">Super Junior – It's You</a></li>
            </ul>
 
         </div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-theme="c">
        <ul>
        <li><a href="store.html"   rel="external"><img src="images/list.png"/></a></li>
        <li><a href="showVideo.html"   rel="external"><img src="images/foot_cam.png"/></a></li>
        <li><a href="#contacts"><img src="images/foot_set.png"/></a></li>
      </ul>
      </div>
  </div>
  </div>
 
      </div>
 
   </body>
   </html>